import React from 'react'
import { styled, Select as MuiSelect, MenuItem, Stack } from '@mui/material'

const Root = styled(Stack)({
  alignItems: 'center',
})

const Label = styled('p')(({ theme }) => ({
  ...theme.typography.body2,
  flexShrink: 0,
  marginRight: 8,
}))

const Select = styled(MuiSelect)({
  color: 'inherit',
  fontSize: 'inherit',
  flexShrink: 0,
})

const OptionsItem = styled(MenuItem)({})

const defaultRenderOptions = value => {
  return { label: `${value} 条/页 `, value }
}

export default function PageSizeSelect(inProps) {
  const {
    label,
    value,
    onChange,
    options,
    renderOptions = defaultRenderOptions,
    ...props
  } = inProps

  return (
    <Root direction={'row'} {...props}>
      {label && <Label>{label}</Label>}
      <Select
        size="small"
        value={value}
        onChange={e => onChange(e, Number.parseInt(e.target.value))}
      >
        {options.map(option => {
          const { label, value } = renderOptions(option)
          return (
            <OptionsItem key={value} value={value}>
              {label}
            </OptionsItem>
          )
        })}
      </Select>
    </Root>
  )
}
